<template>
	<view class="container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="bg-circle bg-circle-1"></view>
			<view class="bg-circle bg-circle-2"></view>
			<view class="bg-circle bg-circle-3"></view>
		</view>

		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="card-glow"></view>
			<view class="user-info">
				<view class="avatar-container">
					<image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
					<view class="avatar-ring"></view>
				</view>
				<view class="user-details">
					<text class="username">{{ userInfo.studentName }}</text>
					<text class="user-phone">{{ userInfo.parentPhone }}</text>
				</view>
			</view>
			<view class="current-hours">
				<view class="hours-display">
					<text class="hours-label">当前课时</text>
					<view class="hours-container">
						<text class="hours-number">{{ userInfo.remainingHours }}</text>
						<text class="hours-unit">课时</text>
					</view>
				</view>
				<view class="hours-icon">⚡</view>
			</view>
		</view>

		<!-- 充值套餐 -->
		<view class="package-section">
			<view class="section-header">
				<view class="header-icon">💎</view>
				<view class="header-text">
					<text class="section-title">选择充值套餐</text>
					<text class="section-subtitle">多种套餐，满足不同需求</text>
				</view>
			</view>

			<view class="package-grid">
				<view 
					class="package-item" 
					:class="{ active: selectedPackage === item.id, popular: item.badge }"
					v-for="item in packages" 
					:key="item.id"
					@click="selectPackage(item.id)"
				>
					<view class="package-glow" v-if="selectedPackage === item.id"></view>
					<view class="package-header">
						<text class="package-amount">¥{{ item.amount }}</text>
						<view class="package-badge" v-if="item.badge">
							<text class="badge-text">{{ item.badge }}</text>
						</view>
					</view>
					<view class="package-desc">
						<text class="desc-text">{{ item.description }}</text>
					</view>
					<view class="package-footer">
						<text class="package-courses">约{{ Math.floor(item.amount / 20) }}课时</text>
						<view class="select-indicator">
							<text class="indicator-icon">✓</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义充值 -->
		<view class="custom-section">
			<view class="section-header">
				<view class="header-icon">🎯</view>
				<view class="header-text">
					<text class="section-title">自定义充值</text>
					<text class="section-subtitle">灵活充值，随心所欲</text>
				</view>
			</view>
			
			<view class="custom-form">
				<view class="form-item">
					<view class="input-container">
						<text class="input-label">充值金额</text>
						<view class="input-wrapper">
							<text class="currency-symbol">¥</text>
							<input 
								class="form-input" 
								v-model="customAmount" 
								type="number" 
								placeholder="输入金额"
							/>
						</view>
					</view>
				</view>
				<view class="form-result" v-if="customAmount && customAmount > 0">
					<view class="result-icon">🎓</view>
					<text class="result-text">预计获得约{{ customHours }}课时</text>
				</view>
			</view>
		</view>

		<!-- 充值记录 -->
		<view class="record-section">
			<view class="section-header">
				<view class="header-icon">📊</view>
				<view class="header-text">
					<text class="section-title">充值记录</text>
					<text class="section-subtitle">最近充值记录</text>
				</view>
				<text class="section-more" @click="showAllRecords" v-if="rechargeRecords.length > 3">查看更多</text>
				<text class="section-count" v-else-if="rechargeRecords.length > 0">共{{ rechargeRecords.length }}条</text>
			</view>
			
			<view class="record-list">
				<view class="record-item" v-for="item in rechargeRecords.slice(0, 3)" :key="item.id">
					<view class="record-info">
						<view class="record-main">
							<text class="record-title">{{ item.title }}</text>
							<text class="record-time">{{ item.time }}</text>
						</view>
						<view class="record-status" :class="item.status">
							<view class="status-dot"></view>
							<text class="status-text">{{ getStatusText(item.status) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部支付按钮 -->
		<view class="bottom-actions">
			<view class="payment-info">
				<text class="payment-label">支付金额</text>
				<view class="amount-display">
					<text class="currency">¥</text>
					<text class="payment-amount">{{ totalAmount }}</text>
				</view>
			</view>
			<button class="pay-btn" @click="handlePayment" :disabled="!canPay">
				<view class="btn-glow"></view>
				<text class="pay-text">立即支付</text>
				<view class="pay-icon">💳</view>
			</button>
		</view>

		<!-- 支付确认弹窗 -->
		<view class="payment-modal" v-if="showPaymentModal" @click="closePaymentModal">
			<view class="modal-backdrop"></view>
			<view class="modal-content" @click.stop>
				<view class="modal-glow"></view>
				<view class="modal-header">
					<view class="modal-icon">💰</view>
					<text class="modal-title">确认支付</text>
					<text class="modal-close" @click="closePaymentModal">×</text>
				</view>
				
				<view class="payment-details">
					<view class="detail-item">
						<text class="detail-label">充值金额</text>
						<text class="detail-value">¥{{ paymentInfo.amount }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">支付方式</text>
						<view class="payment-method">
							<text class="method-icon">💳</text>
							<text class="detail-value">微信支付</text>
						</view>
					</view>
				</view>
				
				<view class="modal-actions">
					<button class="cancel-btn" @click="closePaymentModal">
						<text class="btn-text">取消</text>
					</button>
					<button class="confirm-btn" @click="confirmPayment">
						<view class="btn-shine"></view>
						<text class="btn-text">确认支付</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { API_CONFIG, getApiUrl, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			selectedPackage: null,
			customAmount: '',
			showPaymentModal: false,
			userInfo: {
				studentName: '张三',
				parentPhone: '138****8888',
				remainingHours: 12,
				avatarUrl: ''
			},
			packages: [
				{
					id: 1,
					amount: 1000,
					description: '基础充值',
					badge: ''
				},
				{
					id: 2,
					amount: 2000,
					description: '推荐充值',
					badge: '优惠'
				},
				{
					id: 3,
					amount: 3000,
					description: '超值充值',
					badge: '更划算'
				},
				{
					id: 4,
					amount: 4000,
					description: '大额充值',
					badge: '最划算'
				}
			],
			rechargeRecords: [],
			paymentInfo: {
				amount: 0
			}
		}
	},
	computed: {
		customHours() {
			if (!this.customAmount || this.customAmount <= 0) return 0
			// 假设每课时20元
			return (this.customAmount / 20).toFixed(0)
		},
		
		totalAmount() {
			if (this.selectedPackage) {
				const pkg = this.packages.find(item => item.id === this.selectedPackage)
				return pkg ? pkg.amount : 0
			}
			return this.customAmount || 0
		},
		
		canPay() {
			return this.selectedPackage || (this.customAmount && this.customAmount > 0)
		}
	},
	async onLoad() {
		await this.loadUserInfo()
		await this.loadRechargeRecords()
	},
	methods: {
		async loadUserInfo() {
			const token = uni.getStorageSync('token')
			const localUserInfo = uni.getStorageSync('userInfo') || {}
			
			// 先设置本地存储的基本信息
			this.userInfo = {
				studentName: localUserInfo.name || '未知用户',
				parentPhone: localUserInfo.phone || '',
				remainingHours: 0,
				avatarUrl: localUserInfo.avatarUrl || '/static/default-avatar.png'
			}
			
			if (!token) {
				return
			}
			
			try {
				// 从后端API获取最新的用户信息
				const userResponse = await apiRequest({
					url: getApiUrl('/api/user/info'),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (userResponse.code === 200) {
					const userData = userResponse.data
					// 更新用户信息
					this.userInfo = {
						...this.userInfo,
						studentName: userData.name || localUserInfo.name || '未知用户',
						parentPhone: userData.phone || localUserInfo.phone || '',
						avatarUrl: userData.avatarUrl || localUserInfo.avatarUrl || '/static/default-avatar.png'
					}
				}

				// 获取学生课时信息（使用与index页面相同的API）
				const studentId = localUserInfo?.id
				if (studentId) {
					const lessonResponse = await apiRequest({
						url: getApiUrl(API_CONFIG.ENDPOINTS.STUDENT_LESSON_INFO),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
						},
						data: {
							studentId: studentId
					}
				})

					if (lessonResponse.code === 200) {
						const lessonData = lessonResponse.data
					// 更新剩余课时
						this.userInfo.remainingHours = lessonData.remainingHours || 0
					}
				}

			} catch (error) {
				console.error('加载用户信息失败:', error)
				// 如果API调用失败，继续使用本地存储的信息
			}
		},

		async loadRechargeRecords() {
			const token = uni.getStorageSync('token')
			if (!token) {
				return
			}
			
			try {
				const response = await apiRequest({
					url: getApiUrl('/api/student-class-hours/myRechargeRecords'),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (response.code === 200) {
					// 显示所有充值记录，但用不同状态区分
					const allRecords = response.data || []
					
					this.rechargeRecords = allRecords.map(record => {
						let status, statusText
						
						// 根据支付状态设置显示状态
						if (record.paymentStatus === 1) {
							// 支付成功
							status = record.isProcessed === 1 ? 'success' : 'pending'
							statusText = record.isProcessed === 1 ? '已处理' : '待处理'
						} else if (record.paymentStatus === 0) {
							// 待支付或支付回调失败
							status = 'unpaid'
							statusText = '待支付'
						} else {
							// 支付失败
							status = 'failed'
							statusText = '支付失败'
						}
						
						return {
						id: record.id,
							title: `${record.amount}元充值`,
						time: this.formatTime(record.rechargeTime),
						amount: record.amount,
						notes: record.notes,
							status: status,
							paymentStatus: record.paymentStatus,
							orderNo: record.orderNo
						}
					})
				}
			} catch (error) {
				console.error('加载充值记录失败:', error)
			}
		},

		formatTime(timeString) {
			if (!timeString) return ''
			const date = new Date(timeString)
			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit'
			})
		},
		
		selectPackage(packageId) {
			this.selectedPackage = packageId
			this.customAmount = '' // 清空自定义输入
		},
		
		handlePayment() {
			if (!this.canPay) {
				uni.showToast({
					title: '请选择充值套餐或输入金额',
					icon: 'none'
				})
				return
			}
			
			// 计算支付信息
			if (this.selectedPackage) {
				const pkg = this.packages.find(item => item.id === this.selectedPackage)
				this.paymentInfo = {
					amount: pkg.amount
				}
			} else {
				this.paymentInfo = {
					amount: parseFloat(this.customAmount)
				}
			}
			
			this.showPaymentModal = true
		},
		
		closePaymentModal() {
			this.showPaymentModal = false
		},
		
		async confirmPayment() {
			uni.showLoading({
				title: '创建支付订单...'
			})
			
			try {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.hideLoading()
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}

				// 1. 创建微信支付订单
				const paymentResponse = await apiRequest({
					url: getApiUrl('/api/payment/create'),
					method: 'POST',
					header: {
						'Authorization': `Bearer ${token}`,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						amount: this.paymentInfo.amount,
						description: `课时充值 - ${this.paymentInfo.amount}元`
					}
				})
				
				uni.hideLoading()
				
				if (paymentResponse.code === 200) {
					const paymentParams = paymentResponse.data
					
					// 2. 调用微信支付
					uni.requestPayment({
						appId: paymentParams.appId,
						timeStamp: paymentParams.timeStamp,
						nonceStr: paymentParams.nonceStr,
						package: paymentParams.package,
						signType: paymentParams.signType,
						paySign: paymentParams.paySign,
						success: async (res) => {
							console.log('支付成功:', res)
							
							// 支付成功后的处理
					uni.showModal({
								title: '支付成功',
								content: '支付完成，请等待管理员处理。处理完成后会自动增加课时。',
						showCancel: false,
						success: async () => {
							// 重新加载充值记录
							await this.loadRechargeRecords()
							
							// 重置选择
							this.selectedPackage = null
							this.customAmount = ''
							this.closePaymentModal()
						}
							})
						},
						fail: (err) => {
							console.error('支付失败:', err)
							
							if (err.errMsg && err.errMsg.includes('cancel')) {
								uni.showToast({
									title: '支付已取消',
									icon: 'none'
					})
				} else {
					uni.showToast({
									title: '支付失败，请重试',
									icon: 'none'
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: paymentResponse.message || '创建支付订单失败',
						icon: 'none'
					})
				}
			} catch (err) {
				uni.hideLoading()
				console.error('支付失败:', err)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},
		
		showAllRecords() {
			uni.navigateTo({
				url: '/pages/recharge/records'
			})
		},
		
		getStatusText(status) {
			const statusMap = {
				'success': '成功',
				'pending': '处理中',
				'failed': '失败',
				'unpaid': '待支付'
			}
			return statusMap[status] || status
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
	padding-bottom: 120rpx;
	position: relative; /* Added for background decoration positioning */
}

.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1; /* Ensure it's behind other content */
	overflow: hidden;
	
	.bg-circle {
		position: absolute;
		border-radius: 50%;
		opacity: 0.1;
		filter: blur(50px);
	}
	
	.bg-circle-1 {
		width: 400rpx;
		height: 400rpx;
		background: rgba(255, 255, 255, 0.05);
		left: -100rpx;
		top: 200rpx;
	}
	
	.bg-circle-2 {
		width: 600rpx;
		height: 600rpx;
		background: rgba(255, 255, 255, 0.03);
		right: -200rpx;
		bottom: 300rpx;
	}
	
	.bg-circle-3 {
		width: 300rpx;
		height: 300rpx;
		background: rgba(255, 255, 255, 0.07);
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}

.user-card {
	margin: 20rpx;
	padding: 30rpx;
	background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
	border-radius: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.3);
	position: relative; /* Added for glow effect */
	
	.card-glow {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
		z-index: -1;
	}
	
	&:hover .card-glow {
		opacity: 1;
	}
	
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.avatar-container {
			position: relative;
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			
			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
			}
			
			.avatar-ring {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 2rpx solid rgba(255, 255, 255, 0.5);
				opacity: 0;
				transition: opacity 0.5s ease-in-out;
				z-index: 1;
			}
			
			&:hover .avatar-ring {
				opacity: 1;
			}
		}
		
		.user-details {
			flex: 1;
			
			.username {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
			
			.user-phone {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
	
	.current-hours {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.hours-display {
			display: flex;
			align-items: baseline;
			
			.hours-label {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.9);
				margin-right: 10rpx;
			}
			
			.hours-container {
				display: flex;
				align-items: baseline;
				
				.hours-number {
					font-size: 48rpx;
					color: #00B8D4;
					font-weight: bold;
				}
				
				.hours-unit {
					font-size: 24rpx;
					color: #AAB4BE;
				}
			}
		}
		
		.hours-icon {
			font-size: 40rpx;
			color: #00B8D4;
			opacity: 0.8;
		}
	}
}

.package-section {
	margin: 20rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		
		.header-icon {
			font-size: 40rpx;
			color: #00B8D4;
			margin-right: 15rpx;
		}
		
		.header-text {
			flex: 1;
			
			.section-title {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
			
			.section-subtitle {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
	}
}

.package-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	
	.package-item {
		background: #1a1f2e;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		border: 2rpx solid #2a2f3e;
		position: relative;
		transition: all 0.3s ease;
		
		&.active {
			border-color: #00B8D4;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.1) 0%, rgba(25, 118, 210, 0.1) 100%);
		}
		
		&.popular {
			border-color: #FF9800;
			background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(244, 67, 54, 0.1) 100%);
		}
		
		.package-glow {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
			background: radial-gradient(circle, rgba(0, 184, 212, 0.1) 0%, transparent 70%);
			opacity: 0;
			transition: opacity 0.5s ease-in-out;
			z-index: -1;
		}
		
		&:hover .package-glow {
			opacity: 1;
		}
		
		.package-header {
			margin-bottom: 16rpx;
			
			.package-amount {
				display: block;
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
		}
		
		.package-desc {
			margin-bottom: 16rpx;
			
			.desc-text {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
		
		.package-badge {
			position: absolute;
			top: 16rpx;
			right: 16rpx;
			
			.badge-text {
				background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
				color: #FFFFFF;
				font-size: 20rpx;
				padding: 4rpx 12rpx;
				border-radius: 12rpx;
			}
		}
		
		.package-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			
			.package-courses {
				font-size: 24rpx;
				color: #AAB4BE;
			}
			
			.select-indicator {
				.indicator-icon {
					font-size: 28rpx;
					color: #00B8D4;
				}
			}
		}
	}
}

.custom-section {
	margin: 20rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.header-icon {
			font-size: 40rpx;
			color: #FF9800;
			margin-right: 15rpx;
		}
		
		.header-text {
			flex: 1;
			
			.section-title {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
			
			.section-subtitle {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
	}
}

.custom-form {
	background: #1a1f2e;
	border-radius: 16rpx;
	padding: 30rpx;
	border: 1rpx solid #2a2f3e;
	
	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.input-container {
			display: flex;
			align-items: center;
			flex: 1;
			
			.input-label {
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 20rpx;
			}
			
			.input-wrapper {
				display: flex;
				align-items: baseline;
				background: #2a2f3e;
				border-radius: 12rpx;
				padding: 0 10rpx;
				border: 1rpx solid #3a3f4e;
				
				.currency-symbol {
					font-size: 28rpx;
					color: #AAB4BE;
					margin-right: 5rpx;
				}
				
				.form-input {
					flex: 1;
					height: 60rpx;
					background: transparent;
					border: none;
					padding: 0 10rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	
	.form-result {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding: 15rpx 20rpx;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.1) 0%, rgba(25, 118, 210, 0.1) 100%);
		border-radius: 12rpx;
		border: 1rpx solid rgba(0, 184, 212, 0.3);
		
		.result-icon {
			font-size: 32rpx;
			margin-right: 15rpx;
		}
		
		.result-text {
			font-size: 26rpx;
			color: #00B8D4;
			font-weight: 500;
		}
	}
}

.record-section {
	margin: 20rpx;
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.header-icon {
			font-size: 40rpx;
			color: #4CAF50;
			margin-right: 15rpx;
		}
		
		.header-text {
			flex: 1;
			
			.section-title {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
			
			.section-subtitle {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
		
		.section-more {
			font-size: 26rpx;
			color: #00B8D4;
			padding: 8rpx 16rpx;
			background: rgba(0, 184, 212, 0.1);
			border-radius: 20rpx;
			border: 1rpx solid rgba(0, 184, 212, 0.3);
		}
		
		.section-count {
			font-size: 24rpx;
			color: #AAB4BE;
		}
	}
}

.record-list {
	.record-item {
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 20rpx;
		padding: 25rpx;
		margin-bottom: 16rpx;
		border: 1rpx solid #3a3f4e;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 4rpx;
			height: 100%;
			background: linear-gradient(to bottom, #00B8D4, #1976D2);
		}
		
		.record-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.record-main {
				flex: 1;
				
				.record-title {
					display: block;
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: 500;
					margin-bottom: 8rpx;
				}
				
				.record-time {
					font-size: 24rpx;
					color: #AAB4BE;
				}
			}
			
			.record-status {
				display: flex;
				align-items: center;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				
				.status-dot {
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
				
				.status-text {
					font-size: 24rpx;
					font-weight: 500;
				}
				
				&.success {
					background: rgba(76, 217, 100, 0.2);
					border: 1rpx solid rgba(76, 217, 100, 0.5);
					
					.status-dot {
						background: #4cd964;
					}
					
					.status-text {
						color: #4cd964;
					}
				}
				
				&.pending {
					background: rgba(240, 173, 78, 0.2);
					border: 1rpx solid rgba(240, 173, 78, 0.5);
					
					.status-dot {
						background: #f0ad4e;
						animation: pulse 2s infinite;
					}
					
					.status-text {
						color: #f0ad4e;
					}
				}
				
				&.failed {
					background: rgba(244, 67, 54, 0.2);
					border: 1rpx solid rgba(244, 67, 54, 0.5);
					
					.status-dot {
						background: #f44336;
					}
					
					.status-text {
						color: #f44336;
					}
				}
				&.unpaid {
					background: rgba(103, 58, 183, 0.2);
					border: 1rpx solid rgba(103, 58, 183, 0.5);
					
					.status-dot {
						background: #673aB7;
					}
					
					.status-text {
						color: #673aB7;
					}
				}
			}
		}
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background: linear-gradient(to top, #0B0F1A 0%, rgba(11, 15, 26, 0.95) 100%);
	border-top: 1rpx solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	gap: 20rpx;
	backdrop-filter: blur(20rpx);
	
	.payment-info {
		flex: 1;
		
		.payment-label {
			display: block;
			font-size: 24rpx;
			color: #AAB4BE;
			margin-bottom: 8rpx;
		}
		
		.amount-display {
			display: flex;
			align-items: baseline;
			
			.currency {
				font-size: 24rpx;
				color: #00B8D4;
				margin-right: 4rpx;
			}
			
			.payment-amount {
				font-size: 40rpx;
				color: #00B8D4;
				font-weight: bold;
			}
		}
	}
	
	.pay-btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 240rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
		border-radius: 40rpx;
		border: none;
		overflow: hidden;
		box-shadow: 0 8rpx 30rpx rgba(0, 184, 212, 0.4);
		
		&:disabled {
			background: #2a2f3e;
			opacity: 0.5;
			box-shadow: none;
		}
		
		.btn-glow {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
			opacity: 0;
			transition: opacity 0.3s ease-in-out;
		}
		
		&:active .btn-glow {
			opacity: 1;
		}
		
		.pay-text {
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 600;
			margin-right: 8rpx;
		}
		
		.pay-icon {
			font-size: 24rpx;
		}
	}
}

.payment-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	
	.modal-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(10rpx);
	}
	
	.modal-content {
		position: relative;
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 24rpx;
		width: 85%;
		max-width: 600rpx;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		
		.modal-glow {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: radial-gradient(circle at center top, rgba(0, 184, 212, 0.1) 0%, transparent 70%);
			z-index: -1;
		}
		
		.modal-header {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
			
			.modal-icon {
				font-size: 48rpx;
				margin-right: 20rpx;
			}
			
			.modal-title {
				flex: 1;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
			
			.modal-close {
				font-size: 40rpx;
				color: #AAB4BE;
				line-height: 1;
				padding: 10rpx;
			}
		}
		
		.payment-details {
			padding: 30rpx;
			
			.detail-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.detail-label {
					font-size: 28rpx;
					color: #AAB4BE;
				}
				
				.detail-value {
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: 600;
				}
				
				.payment-method {
					display: flex;
					align-items: center;
					
					.method-icon {
						font-size: 24rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
		
		.modal-actions {
			display: flex;
			gap: 20rpx;
			padding: 30rpx;
			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
			
			.cancel-btn, .confirm-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				border: none;
				position: relative;
				overflow: hidden;
				
				.btn-text {
					font-size: 28rpx;
					font-weight: 500;
				}
			}
			
			.cancel-btn {
				background: #2a2f3e;
				border: 1rpx solid #3a3f4e;
				
				.btn-text {
					color: #AAB4BE;
				}
			}
			
			.confirm-btn {
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				box-shadow: 0 8rpx 30rpx rgba(25, 118, 210, 0.4);
				
				.btn-shine {
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
					transition: left 0.6s ease-in-out;
				}
				
				&:active .btn-shine {
					left: 100%;
				}
				
				.btn-text {
					color: #FFFFFF;
				}
			}
		}
	}
}
</style> 